<template>
	<view class="electricity">
		<view class="pageHead">
			<view class="headStatus" :style="{height: sysHeight}"></view>
			<view class="headNav">
				<view class="iconfont icon-fanhui2" @tap="returns"></view>
				<view class="headTitle">
					<!-- 电费缴费 -->
					توك پۇلى تۈلەش
				</view>
			</view>
		</view>
		<view class="bodyWrap" :style="{height: 'calc(100vh - ' + headH + ')'}">
			<view class="wrapTitle">
				<!-- 电卡号 -->
				كارتا نۇمۇرى
			</view>
			<view class="electricityTxt">
				{{electricityVal}}
			</view>
			<!-- 余额查询 -->
			<view class="checkResult" v-if="electricityInfo">
				<view class="resultTitle">
					<text class="resultTitleTxt">تەكشۈرۈش نەتىجىسى</text>
				</view>
				<view class="resultInfo">
					<view class="resultInfoItem">									
						<view class="itemLabel">
							ئىسىم فامىلىسى
						</view>
						<view class="itemVal">
							{{electricityInfo.userName}}
						</view>
					</view>
					<view class="resultInfoItem">
						<view class="itemLabel">
							قالدۇق
						</view>
						<view class="itemVal">
							¥{{electricityInfo.balance}}
						</view>
					</view>
				</view>
			</view>
			<view class="denomination">
				<view class="denominationWrap">
					<view :class="['rtl', 'denominationItem', item.denominationId === selectVal ? 'active' : '']" v-for="(item, index) in denominationArr" @click="clickItem(item)">
						{{item.money}}<text class="company">يۈەن</text>
					</view>
				</view>
				<!-- <view class="arbitrarily">
					<input class="input" type="text" value="" placeholder-style="fontSize: 32rpx;" placeholder-class="inputPl" placeholder="خالىغان قىممەت" />
				</view> -->
			</view>
			<!-- <view class="coupon">
				<view class="couponLeft">
					<image class="hongbao" src="/static/images/hongbao.png" mode=""></image>
					<view class="couponTxt">
						ئىتىۋار بىلىتى
					</view>
				</view>
				<view class="couponSelect">
					-¥6
					<image class="jiantou" src="/static/images/jiantou1.png" mode=""></image>
				</view>
			</view>
			<view class="vipBox">
				<view class="vipTitle">ۋاكالەتچى بۇلامسىز ؟</view>
				<view class="vipDes">ئالاھىدە ئەزا بولسىڭىز تېخىمۇ كۆپ ئىتىۋارلاردىن بەھىرلىنەلەيسىز</view>
				<button class="vipBtn" type="default">ئېچىش</button>
			</view> -->
			<view class="btmBox">
				<view class="btmSub">
					<view class="money">
						¥ {{total_price}}
					</view>
					<view class="subBtn" @click='goPay()'>
						قاچىلاش
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { electricQuery, electricDenomination, electricOrder, electricPayAgain, electricPayCancel } from "@/api/dailyLife.js"
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let headH= uni.getSystemInfoSync().statusBarHeight + 43 + 'px';
	export default {
		data() {
			return {
				electricityVal: '',
				sysHeight: sysHeight,
				selectVal: 0,
				denominationArr: [],
				headH: headH,
				electricityInfo: null,
				fee: 0, // 服务费
				price: 0, // 金额
				orderId: '', // 上次支付用的订单id
				orderNo: '' // 上次支付用的订单编号
			};
		},
		
		computed: {
			total_price() {
				return Number((Number(this.price) + Number(this.fee)).toFixed(2));
			}
		},
		
		methods: {
			// 后退
			returns() {
				return uni.navigateBack({
					delta: 1,
				})
			},
			
			clickItem(item) {
				this.selectVal = item.denominationId;
				this.fee = item.fee;
				this.price = item.money;
			},
			// 提交订单
			async goPay() {
				if (this.total_price === 0) {
					uni.showModal({
						title: this.$i18n['提示'],
						content: this.$i18n['请选择充值面额'],
						showCancel: false,
						confirmText: this.$i18n['确认']
					});
					return;
				}
				let that = this;
				
				uni.showLoading({
					title: 'تۈلىنۋاتىدۇ'
				});
				let params = {
					cardNum: this.electricityVal,
					money: this.price,
					denominationId: this.selectVal,
					queryId: this.electricityInfo.queryId,
				}
				try{
					const resData = await electricOrder(params);
					that.payFn(resData);
				}catch(e){
					uni.hideLoading();
				}
			},
			
			// 支付fn
			payFn(resData) {
				let that = this;
				const jsConfig = resData.data.jsConfig;
				const orderInfo = resData.data.order;
				uni.requestPayment({
					timeStamp: jsConfig.timeStamp,
					nonceStr: jsConfig.nonceStr,
					package: jsConfig.package,
					signType: jsConfig.signType,
					paySign: jsConfig.paySign,
					success: function(res) {
						uni.hideLoading();
						uni.redirectTo({
							url: `/pages/dailyLife/rechargeResult/index?orderId=${orderInfo.orderId}&orderNo=${orderInfo.orderNo}&pageType=4`
						})
					},
					fail: function(e) {
						uni.hideLoading();
						if (e.errMsg == 'requestPayment:fail cancel') {
							that.orderId = orderInfo.orderId;
							that.orderNo = orderInfo.orderNo;
							uni.showModal({
								title: that.$i18n['提示'],
								content: that.$i18n['是否取消支付？'],
								cancelText: that.$i18n['确认'],
								confirmText: that.$i18n['取消'],
								success: function (res) {
									if (res.confirm) {
										that.againPay()
									} else if (res.cancel) {
										that.cancelPay()
									}
								}
							});
							return;
						}
					}
				})
			},
			
			// 取消支付
			async cancelPay() {
				uni.showLoading({
					title: ''
				});
				let params = {
					orderId: this.orderId,
					orderNo: this.orderNo
				}
				try{
					const resData = await electricPayCancel(params);
					this.$util.Tips({
						title: resData.msg
					})
					uni.hideLoading();
				}catch(e){
					uni.hideLoading();
				}
			},
			
			// 重新支付
			async againPay() {
				uni.showLoading({
					title: 'تۈلىنۋاتىدۇ'
				});
				let params = {
					orderId: this.orderId,
					orderNo: this.orderNo
				}
				try{
					const resData = await electricPayAgain(params);
					this.payFn(resData);
				}catch(e){
					uni.hideLoading();
				}
			},
			
			// 加载数据
			async loadPage(options) {
				// 获取电费信息
				this.electricityVal = options.number;
				const resInfo = await electricQuery({
					number: options.number
				})
				this.electricityInfo = resInfo.data;
				// 获取面额
				const resList = await electricDenomination();
				this.denominationArr = resList.data;
				
			}
		},
		
		onLoad(options) {
			this.loadPage(options)
		},
		
	}
	
</script>

<style lang="scss">
	.electricity {
		width: 750rpx;
		min-height: 100vh;
		background: linear-gradient(180deg, #FDD048 0%, #FAF6ED 516rpx, #F9F9F9 100%);
		.pageHead {
			position: flex;
			.headStatus {
				width: 100%;
			}
			.headNav {
				display: flex;
				height: 43px;
				line-height: 43px;
				text-align: center;
				font-size: 36rpx;
				color: #333;
				.icon-fanhui2 {
					position: absolute;
					left: 40rpx;
				}
				.headTitle {
					width: 100%;
					height: 43px;
					line-height: 43px;
					width: 100%;
					text-align: center;
				}
			}
		}
		.bodyWrap {
			padding: 50rpx 30rpx 0;
			overflow-y: auto;
			box-sizing: border-box;
			
			.wrapTitle {
				width: 690rpx;
				height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				margin: 0 auto;
			}
			.electricityTxt {
				width: 690rpx;
				height: 74rpx;
				line-height: 74rpx;
				font-size: 52rpx;
				font-weight: 500;
				color: #333333;
				margin: 10rpx auto 0;
			}
			.checkResult {
				width: 690rpx;
				min-height: 136rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 20rpx 30rpx;
				margin: 20rpx auto 0;
				
				.resultTitle {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.resultTitleTxt {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
				.resultInfo {
					margin-top: 10rpx;
					color: #333;
					display: flex;
					line-height: 28rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					flex-wrap: wrap;
					
					.resultInfoItem {
						display: flex;
						align-items: center;
						margin-right: 62rpx;
						padding-top: 20rpx;
						
						.itemLabel {
							margin-right: 20rpx;
						}
					}
				}
			}
			.denomination {
				width: 690rpx;
				padding: 20rpx;
				width: 690rpx;
				max-height: 780rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 20rpx auto 0;
				overflow: auto;
				
				.denominationWrap {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					
					.denominationItem {
						width: 200rpx;
						height: 114rpx;
						background: #F8F8F8;
						border-radius: 16rpx;
						font-size: 48rpx;
						font-weight: 500;
						color: #E9550E;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 12rpx;
						
						&:last-child:nth-child(3n + 2) {
							margin-right: calc((100% - 31%) / 2);
						}
						
						.company {
							width: 28rpx;
							font-size: 28rpx;
							font-weight: 500;
							margin-left: 4rpx;
						}
					}
					.active {
						background: #FDD04B;
						color: #FFF;
					}
				}
				.arbitrarily {
					border-bottom: 1px solid #EFEFEF;
					margin-top: 20rpx;
					.input {
						font-size: 32rpx;
						height: 88rpx;
						line-height: 88rpx;
						font-weight: 400;
					}
					
				}
			}
			
			.coupon {
				width: 690rpx;
				height: 110rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 20rpx auto 0;
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.couponLeft {
					display: flex;
					align-items: center;
					.hongbao {
						width: 68rpx;
						height: 68rpx;
					}
					.couponTxt {
						margin-left: 18rpx;
					}
				}
				.couponSelect {
					font-size: 30rpx;
					font-weight: 500;
					color: #E9550E;
					.jiantou {
						width: 12rpx;
						height: 20rpx;
						margin-left: 14rpx;
					}
				}
			}
			
			.vipBox {
				width: 690rpx;
				height: 174rpx;
				background-image: url(https://xcx.azanbazar.com/program/vipBg.png);
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
				position: relative;
				margin: 20rpx auto 0;
				
				.vipTitle {
					height: 42rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
					position: absolute;
					left: 196rpx;
					top: 44rpx;
				}
				.vipDes {
					width: 340rpx;
					line-height: 34rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					margin-top: 10rpx;
					position: absolute;
					left: 196rpx;
					top: 96rpx;
				}
				.vipBtn {
					width: 124rpx;
					height: 52rpx;
					line-height: 52rpx;
					background: linear-gradient(90deg, #FFCA4C 0%, #FFB705 100%);
					border-radius: 4rpx;
					position: absolute;
					right: 30rpx;
					top: 54rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
			.btmBox {
				width: 690rpx;
				height: 198rpx;
			}
			.btmSub {
				display: flex;
				width: 750rpx;
				height: 198rpx;
				background: #fff;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx 72rpx;
				position: fixed;
				left: 0;
				bottom: 0;
				.money {
					font-size: 48rpx;
					font-weight: bold;
					color: #E9550E;
				}
				.subBtn {
					width: 296rpx;
					height: 96rpx;
					line-height: 96rpx;
					text-align: center;
					background: linear-gradient(178deg, #FFCE53 0%, #FDD04A 100%);
					border-radius: 50rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	} 
</style>
